<template>
	<view class="addr">
		<view class="tit">
			地址列表
		</view>
		
		<view v-if="!list.length && senDate"  style="padding: 350rpx 0 0;">
			<u-empty font-size="26" icon-size="174" class="nodata" src="../../../static/aidex/images/nodata.png"
				text="您还没有添加收获地址哦~" mode="list"></u-empty>
		</view>
		
		<view v-else class="list">
			<view class="item" v-for="item in list" @click="chioceFn(item)">
				<view class="top">
					<view class="addrTOP">
						{{item.province}} {{item.city}} {{item.area}} {{item.address}}
					</view>
					<view class="info">
						收货人：{{item.realname}}
						<text>{{item.tell}}</text>
					</view>
				</view>
				<view class="bot">
					<view class="check" @click.stop="chanmoren(item)">
						<u-icon v-if="item.moren=='是'" name="checkmark-circle-fill" color="#D39565" size="31"
							class="u-m-r-15"></u-icon>
						<u-icon v-else name="checkmark-circle-fill" color="#4A4A4A" size="31" class="u-m-r-15"></u-icon>
						<text v-if="item.moren=='是'" style="color: #D39565;">默认地址</text>
						<text v-else>默认地址</text>
					</view>
					<view class="right">
						<view @click.stop="edit(item)" class="cot">
							<img src="../../../static/aidex/images/edit.png">
							编辑
						</view>
						<view @click="del.stop(item)" class="cot">
							<img src="../../../static/aidex/images/del.png">
							删除
						</view>
		
					</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<u-button @click="add" class="sub" type="primary" shape="circle" :ripple="true" ripple-bg-color="#909399">
				新增地址</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			edit(item) {
				uni.navigateTo({
					url: "/pages/sys/msg/addrList?id=" + item.id
				})
			},
			add() {
				uni.navigateTo({
					url: "/pages/sys/msg/addrList"
				})
			},
			chioceFn(item){
				if(this.choice){
				
					this.$u.vuex("vuex_checkedAddr", item);
					uni.navigateBack()
				}
			},
			chanmoren(item) {

				this.$u.api.setMoren({
						addressId: item.id
					})
					.then((res) => {
						this.list = []
						this.getlist()
					});
				// this.list?.map(r => {
				// 	this.$set(r, 'checked', false)
				// })
				// item.checked = true

			},
			del(item) {

				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除地址吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							
							that.$u.api.deleteAddress({
									addressId: item.id
								})
								.then((res) => {
									that.$u.toast(res.msg); 
									that.list = []
									that.getlist()
								});



						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			getlist() {
				this.senDate = false;
				this.$u.api.addresslist()
					.then((res) => {
						this.senDate = true;
						this.list = res.list

					});
			}
		},
		onShow() {
			this.list = []
			this.getlist()
		},
		onLoad(e) {
			// console.log(e.choice);
			this.choice = e?.choice
		},
		data() {
			return {
				senDate:false,
				choice:false,
				list: [{
						checked: true
					}, {
						checked: false
					},

				]
			}
		}
	}
</script>
<style>
	page {
		background: #005850;
		padding: 48rpx 35rpx;
	}
</style>
<style scoped lang="scss">
	.foot {
		position: fixed;
		left: 40px;
		right: 40px;
		bottom: 60px;
	}

	.sub {
		height: 88rpx;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 42rpx;
	}

	.addr {
		background: #F7F8F3;
		border-radius: 27rpx;
		padding: 46rpx 32rpx 180rpx;
		min-height: 92vh;

		.tit {
			font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
			font-weight: normal;
			font-size: 30rpx;
			color: #024546;
			line-height: 42rpx;
			padding-bottom: 20rpx;
		}

		.list {
			.item {
				padding: 30rpx 35rpx 0;

				background: #FFFFFF;
				border-radius: 25rpx;
				margin-bottom: 29rpx;

				.top {
					font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
					font-weight: normal;
					font-size: 26rpx;
					color: #4A4A4A;
					line-height: 35rpx;
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid rgba(151, 151, 151, 0.2);
				}

				.bot {
					padding: 31rpx 0 28rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.check {
						font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
						font-weight: normal;
						font-size: 26rpx;
						color: #4A4A4A;
					}

					img {
						width: 28rpx;
						display: block;
						margin-right: 15rpx;
					}

					.right {
						display: flex;
						align-items: center;
					}

					.cot {
						font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
						font-weight: normal;
						font-size: 26rpx;
						color: #4A4A4A;
						line-height: 35rpx;
						display: flex;
						align-items: center;
					}

					.cot:first-child {
						margin-right: 43rpx;
					}
				}
			}
		}
	}
</style>
